<template>
  <div class="model_bgc">
    <header_ title="" :pathName="this.$store.state" background='#00000000' color='#000000' image_='1' size='4.8vw' />
    <div class="luckyBox">
      <div class="Diamonds" v-for="(list,indexs) in luckBox" :key="indexs">
        <div>{{list.giftName}}</div>
        <div class="one_diamonds">
          <img :src="list.icon" alt="" />
          <div class="dia_lis">
            <img src="../../public/img/signin/mohe/Group.png" alt="" />
            <div>{{list.money}}</div>
          </div>
        </div>
        <div class="list_miaomi">
          <div class="box_dia" v-for="(item,index) in list.treeGift" :key="index">
            <div class="one_tubiao">
              <img :src="item.icon" alt="" />
              <div class="list_text">{{item.name}}</div>
            </div>
            <div class="text_biaoti">
              <img src="../../public/img/signin/mohe/Group.png" alt="" />
              <div>{{item.money}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="explain">
        <div>1、用户送出后随机送出相应魔盒内礼物</div>
        <div>2、一旦送出无法撤回操作，请谨慎操作</div>
        <div>3、此玩法仅限打赏使用，不可过度消费</div>
        <div>4、法律范围内解释权归声贝所有</div>

      </div>
      <div class="interpretation">本活动最终解释权归官方所有</div>
    </div>
  </div>

</template>

<script>
  import header_ from '../../components/header_'
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        luckBox: [], //魔盒
      };
    },
    created() {
      this.give_gift();
    },
    components: {
      header_
    },
    methods: {
      give_gift() {
        let arys = {}; //参数
        let url = "/gift/giftList";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.luckBox = res.data.result.boxGift
          }
        });
      }
    },
  };
</script>
<style scoped>
  .model_bgc {
    background: linear-gradient(to bottom, #2c4c84, #2c4c84, #1c0e50);
  }

  .luckyBox {
    width: 100vw;
    background: url("../../public/img/signin/mohe/bg1@2x.png") no-repeat;
    background-size: 100%;

    overflow: hidden;
    font-family: PingFangSC-Regular, sans-serif;
    overflow: auto;
  }

  .luckyBox .Diamonds {
    width: 98vw;
    height: 175vw;
    margin: 0 auto;
    margin-top: 44vw;
    background: url("../../public/img/signin/mohe/bg2@2x.png") no-repeat;
    background-size: 100%;
    overflow: hidden;
  }

  .Diamonds>div:nth-of-type(1) {
    width: 100%;
    text-align: center;
    position: relative;
    top: 20vw;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }

  .luckyBox>.Diamonds:nth-of-type(2) {
    margin-top: 0vw;
  }

  .luckyBox>.Diamonds:nth-of-type(3) {
    margin-top: 0vw;
  }

  .luckyBox>.Diamonds:nth-of-type(4) {
    margin-top: 0vw;
  }

  .luckyBox .Diamonds .one_diamonds {
    width: 47vw;
    height: 44vw;
    margin: 27vw auto 0vw;
    display: flex;
    flex-direction: column;
    background: url("../../public/img/signin/mohe/top.png");
    background-size: 100%;
    position: relative;
  }

  .one_diamonds img:nth-of-type(1) {
    width: 54px;
    height: 54px;
    margin: 10vw auto;
    transform: scale(1.5);
  }

  .luckyBox .explain {
    width: 98vw;
    margin: 0 auto;
    height: 104vw;
    background: url("../../public/img/signin/mohe/bg3@2x.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    background-position: 0 0;
  }

  .explain div {
    font-family: PingFangSC-Regular, sans-serif;
    width: 70vw;
    margin: 0 auto;
    color: #ffffff;
    margin-bottom: 4vw;
    font-size: 3.5vw;
    line-height: 10.8vw;
  }

  .explain>div:nth-of-type(1) {
    margin-top: 23vw;
  }

  .interpretation {
    height: 10vw;
    text-align: center;
    font-size: 2.7vw;
    color: #ffffff;
  }

  .dia_lis {
    width: 80%;
    height: 7vw;
    text-align: center;
    display: flex;
    position: absolute;
    bottom: 0;
  }

  .luckyBox .Diamonds .one_diamonds .dia_lis img {
    width: 20%;
    height: 6vw;
    margin: 2vw 0vw 0 11vw;
  }

  .dia_lis>div {
    width: 30%;
    height: 100%;
    line-height: 8vw;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 3.74vw;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .list_miaomi {
    width: 80vw;
    height: 74vw;
    overflow-y: scroll;
    margin-top: 4vw;
    margin: 5vw auto;
  }

  .list_miaomi>div {
    float: left;
    width: 20vw;
    height: 30vw;
    margin-left: 5vw;
    margin-top: 5.3vw;
  }

  .one_tubiao {
    position: relative;
    width: 100%;
    height: 24vw;
    background: url("../../public/img/signin/mohe/Oval.png");
    background-size: 100%;
  }

  .one_tubiao>img {
    width: 14.6vw;
    height: 14.6vw;
    margin-top: 1.4vw;
    margin-left: 2.7vw;
  }

  .one_tubiao>.list_text {
    width: 100%;
    color: #ffffff;
    font-size: 3.2vw;
    text-align: center;
    position: absolute;
    bottom: 1vw;
  }

  .text_biaoti {
    display: flex;
    width: 100%;
    height: 4.3vw;
    margin: 1vw auto;
  }

  .text_biaoti img {
    width: 7.4vw;
    height: 6.4vw;

  }

  .text_biaoti div {
    font-size: 3.2vw;
    color: #ffffff;
    line-height: 5.2vw;
  }

  .probability {
    width: 100%;
    text-align: center;
    font-size: 2.7vw;
    color: #a7a7a7;
    font-weight: Regular;
    line-height: 3.7vw;
  }
</style>